<template>
  <ClientOnly>
    <div id="user-teleport" class="full-action-sheet-teleport"></div>
    <van-action-sheet
      :show="userStore.showUser"
      :before-close="beforeClose"
      destroyOnClose
      teleport="#user-teleport"
    >
      <div class="headUser">
        <div class="headUserBody app_center">
          <Info />
          <UserCard />
          <Agente />
          <Cells />
        </div>
      </div>
    </van-action-sheet>
  </ClientOnly>
</template>

<script setup lang="ts">
import Info from "./components/Info.vue";
import Agente from "./components/Agente.vue";
import Cells from "./components/Cells.vue";

const userStore = useUserStore();
function beforeClose() {
  userStore.changeShowUser(false);
}
const route = useRoute();
watch(
  () => route.name,
  () => {
    beforeClose();
  }
);
</script>

<style scoped lang="scss">
.headUser {
  height: 100vh;
  width: 100vw;
}
.headUser .headUserBody {
  position: absolute;
  z-index: 101;
  right: 0;
  overflow-y: auto;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 0.25rem 0;
  padding-bottom: 2.5rem;
}
</style>
